import React from 'react'
import styles from './styles/dialog'
import {hashHistory} from "react-router"
import DialogStore from './stores/dialog'
import DialogActions from './actions/dialog'

export default  React.createClass({

    getInitialState: function () {
        return DialogStore.getState();
    },

    componentDidMount: function () {
        DialogStore.listen(this.onChange);
    },

    componentWillUnmount: function () {
        DialogStore.unlisten(this.onChange);
    },

    onChange: function (state) {
        this.setState(state);
    },

    render: function () {
        let show = this.state.show ? ' modal-show' : '';
        let visible = this.state.visible ? ' visible' : '';
        let config = this.state;
        return (
            <div className={"modal-root alert-modal"+ visible}>
                <div className={"mask" + show}></div>
                <div className={"modal-container" + show} onClick={this.hide}>
               		<span className="sline"></span>
                    <div className="modal-content" onClick={e=>e.stopPropagation()}>
                        <div className="modal-header">
                            <h4 className="modal-title">{config.title || '提示'}</h4>
                        </div>
                        <div className="con">
    	                    {config.form || ''}
                        </div>
                    </div>
                </div>
            </div>
        )
    },

    onConfirm: function () {
        this.hide();
        let config = this.state;
        if(config.url) setTimeout(()=>hashHistory.push(config.url),300);
        if(config.onConfirm) setTimeout(()=>config.onConfirm(),300);
    },

    onCancel: function () {
        this.hide();
        let config = this.state;
        if(config.onCancel) config.onCancel();
    },

    hide: function(){
        DialogActions.hide();
        if(this.state.onHide) this.state.onHide();
    }
});
